<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
		<title>消息</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="../../css/index.css" />
		<link rel="stylesheet" href="../../css/message.css" />
		<link rel="stylesheet" href="../../js/layer/layer.css" />
		<script type="text/javascript" src="../../js/layer/layer.js"></script>
		<script type="text/javascript" src="../../js/util/loading.js"></script>
		<script type="text/javascript" src="../../js/util/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" src="../../js/util/app.js"></script>
		<script type="text/javascript" src="../../js/ui/Tag.js"></script>
		<script type="text/javascript" src="../../js/mock/message.js"></script>
		<script type="text/javascript" src="../../js/biz/index/message.js"></script>
	</head>
	<body>
		<div class="page">
			<header class="message-header">
				<h1><i class="fas fa-bell"></i> 消息中心</h1>
				<div id="tags" style="margin-top: var(--gap);"></div>
			</header>
			<main class="content">
				<section class="loading_layout" id="loading_layout">
					<div class="spinner" id="loading_spinner">
						<div class="bounce1"></div>
						<div class="bounce2"></div>
						<div class="bounce3"></div>
					</div>
					<img id="loading_state_img" class="state_img" src="../../img/ic_empty.png" />
					<span id="loading_state_text" class="state_text">正在加载...</span>
				</section>
				<section id="list" class="message-list"></section>
			</main>
		</div>
		<div class="action-modal" id="actionModal">
			<div class="modal-content">
				<button class="modal-close"><i class="fas fa-times"></i></button>
				<div class="modal-actions">
					<button class="modal-btn mark-read"><i class="fas fa-envelope-open"></i> 标记为已读</button>
					<button class="modal-btn mark-unread"><i class="fas fa-envelope"></i> 标记为未读</button>
					<button class="modal-btn delete"><i class="fas fa-trash-alt"></i> 删除消息</button>
				</div>
			</div>
		</div>
	</body>
</html>
